<!--
*******************************************************************************
 * Copyright © 2022-2023 VMware, Inc. All Rights Reserved.
* Copyright @2025 YIQISOFT
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

 <div class="card">
    <div class="card-header font-weight-bold">
        <i class="fa fa-tags fa-lg text-danger mr-1"></i><span i18n>Device Protocol</span>
    </div>
    <div class="card-body">
        <div *ngIf="mode" class="card">
            <div class="card-body">
                <div *ngIf="mode === MODE_ADD" class="mb-2">
                    <span class="user-select-none badge font-weight-bold mr-3" role="button" (click)="changeProtocolTemplateMode(TEMPLATE_BUILT_IN)" [class.badge-primary]="protocolTemplateMode === TEMPLATE_BUILT_IN" [class.badge-secondary]="protocolTemplateMode !== TEMPLATE_BUILT_IN">
                        <i class="fa fa-square-o mr-1" [class.fa-check-square]="protocolTemplateMode === TEMPLATE_BUILT_IN"></i>
                        <span i18n>Avaliable Protocol Templates</span>
                    </span>
    
                    <span class="user-select-none badge font-weight-bold" role="button" (click)="changeProtocolTemplateMode(TEMPLATE_CUSTOM)"  [class.badge-primary]="protocolTemplateMode === TEMPLATE_CUSTOM" [class.badge-secondary]="protocolTemplateMode !== TEMPLATE_CUSTOM">
                        <i class="fa fa-square-o mr-1" [class.fa-check-square]="protocolTemplateMode === TEMPLATE_CUSTOM"></i>
                        <span i18n>Custom Protocol Templates</span>
                    </span>
                </div>
                
                <div *ngIf="protocolTemplateMode === TEMPLATE_CUSTOM; then customProtocolTemplate else builtinProtocolTemplate"> 
                </div>

                <ng-template  #builtinProtocolTemplate>
                    <div class="row border border-secondary p-2 rounded-lg mx-1">
                        <div class="col-md-2 border-right border-info">
                            <form>
                                <div class="form-group">
                                    <label i18n>Protocol Name</label>
                                    <select type="text" class="custom-select"  name="builtinProtocolName" [class.is-invalid]="!builtinProtocolName" [class.is-valid]="builtinProtocolName" [(ngModel)]="builtinProtocolName" (ngModelChange)="onSelectBuiltinProtocolTemplate()" required>
                                        <option value="mqtt">device-mqtt</option>
                                        <option value="other-rest">device-rest</option>
                                        <option value="other">device-virtual</option>
                                        <option value="modbus-tcp">device-modbus-tcp</option>
                                        <option value="modbus-rtu">device-modbus-rtu</option>
                                        <option value="Onvif">device-onvif-camera</option>
                                        <option value="opcua">device-opcua</option>
                                        <option value="s7">device-s7</option>
                                        <option value="tcp">device-rfid-llrp</option>
                                    </select>
                                    <div class="invalid-feedback">
                                        <small i18n>the protocol name can't be empty!</small> 
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-10">
                            <div *ngIf="builtinProtocolTemplateProperties.length !== 0; else noBuiltinProperties">
                                <div *ngFor="let property of builtinProtocolTemplateProperties">
                                    <form class="form-inline mb-1">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                              <span class="input-group-text" i18n>PropertyName</span>
                                            </div>
                                            <input type="text" class="form-control"  disabled [value]="property" style="width: 300px;">
                                        </div>
                                        <div class="form-group mx-2">
                                            <i class="fa fa-long-arrow-right"></i> 
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                              <span class="input-group-text" i18n>PropertyVaule</span>
                                            </div>
                                            <input type="text" class="form-control" name="property" [(ngModel)]="builtinProtocolTemplateSelected[property]" style="width: 300px;" >
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <ng-template #noBuiltinProperties>
                                <div>
                                    <span class="fa fa-info-circle fa-lg text-success font-weight-bold mr-1">
                                    </span>
                                    <span class="text-muted" i18n>
                                        all built-in protocol templates refer to the device service released by edgex, such as device-virtual, device-rest, device-mqtt, device-modbus
                                    </span>
                                </div>
                                <h5 *ngIf="builtinProtocolTemplateProperties.length === 0 && builtinProtocolName" class="text-warning">
                                    <i class="fa fa-warning mr-1"></i>
                                    <span i18n>this device service doesn't need to set protocol properties</span>
                                </h5>
                            </ng-template>
                        </div>
                    </div>
                </ng-template>

                <ng-template #customProtocolTemplate>
                    <div class="row  border border-secondary p-2 rounded-lg mx-1">
                        <div class="col-md-2 col-lg-2 border-right border-secondary">
                            <div class="form-group">
                                <label i18n>Protocol Name</label>
                                <input type="text" class="form-control" [class.is-invalid]="!customProtocolName" [class.is-valid]="customProtocolName" name="customProtocolName" [(ngModel)]="customProtocolName" (ngModelChange)="onCustomProtocolNameChange()">
                                <div class="invalid-feedback">
                                    <small i18n>the protocol name can't be empty!</small> 
                                </div>
                            </div>
                        </div>
                        <div class="col-md-10 col-lg-10">
                            <div>
                                <p class="badge badge-secondary font-weight-bold">
                                    <span class="fa fa-plus-circle mr-2"></span>
                                    <span class="user-select-none" role="button" (click)="addCustomProtocolProperty()" i18n>Add Protocol Property</span>
                                </p>
                            </div>
    
                            <div *ngFor="let property of customProtocolPropertyBearer">
                                <form class="form-inline mb-1">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" i18n>PropertyName</span>
                                        </div>
                                        <input type="text" class="form-control" name="propertyName" [(ngModel)]="property.propertyName" style="width: 300px;">
                                    </div>
                                    <div class="form-group mx-2">
                                        <i class="fa fa-long-arrow-right"></i> 
                                    </div>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text" i18n>PropertyValue</span>
                                        </div>
                                        <input type="text" class="form-control" name="PropertyValue" [(ngModel)]="property.propertyValue" style="width: 300px;">
                                    </div>
                                    <div class="input-group ml-2">
                                        <button class="btn btn-danger btn-sm" (click)="removeCustomProtocolProperty(property)"> <i class="fa fa-trash"></i> </button>
                                    </div>
                                </form>
                            </div>
    
                        </div>
                    </div>
                </ng-template>
            </div>
        </div>
    </div>
</div>